<div class="dragular-handle backlog-item-details {{ backlogItemController.backlog_item.status | lowercase }}"
    ng-class="[
        backlogItemController.backlog_item.color, {
        'moving-to': backlogItemController.backlog_item.moving_to,
        created    : backlogItemController.backlog_item.created,
        updated    : backlogItemController.backlog_item.updated,
        updating   : backlogItemController.backlog_item.updating,
        selected   : backlogItemController.backlog_item.selected,
        multiple   : backlogItemController.backlog_item.multiple,
        hidden     : backlogItemController.backlog_item.hidden,
        shaking    : backlogItemController.backlog_item.shaking,
        undraggable: ! canUserMoveCards()
    }]"
    backlog-item-details="backlogItemController.backlog_item"
    move-to-top="backlogItemController.moveToTopInParent(backlogItemController.backlog_item)"
    move-to-bottom="backlogItemController.moveToBottomInParent(backlogItemController.backlog_item)"
    current-milestone="current_milestone"
></div>

<div class="backlog-item-show-children"
    ng-hide="(backlogItemController.backlog_item.children.data.length === 0 && (! backlogItemController.backlog_item.has_children || backlogItemController.backlog_item.children.loaded))"
    data-nodrag="true"
>
    <div class="backlog-item-children"
        ng-show="! backlogItemController.backlog_item.children.collapsed"
    >
        <div class="backlog-item-children-list"
            data-backlog-item-id="{{ backlogItemController.backlog_item.id }}"
            data-nodrop="{{ ! canUserMoveCards() }}"
            data-accept="{{ backlogItemController.backlog_item.accepted_types.toString() }}"
        >
            <div ng-repeat="backlog_item in backlogItemController.backlog_item.children.data"
                class="backlog-item child {{ planning.current_view_class }}"
                data-type="{{ backlog_item.trackerId }}"
                ng-show="planning.canShowBacklogItem(backlog_item)"
                data-nodrag="{{ ! canUserMoveCards() }}"
                data-item-id="{{ backlog_item.id }}"
                backlog-item-index="$index"
                backlog-item-select="backlog_item"
            >
                <div class="backlog-item-details dragular-handle-child {{ backlog_item.status | lowercase }}"
                    ng-class="[
                        backlog_item.color, {
                        'moving-to': backlog_item.moving_to,
                        created    : backlog_item.created,
                        updated    : backlog_item.updated,
                        updating   : backlog_item.updating,
                        selected   : backlog_item.selected,
                        multiple   : backlog_item.multiple,
                        hidden     : backlog_item.hidden,
                        shaking    : backlog_item.shaking,
                        undraggable: ! canUserMoveCards()
                    }]"
                    backlog-item-details="backlog_item"
                    move-to-top="backlogItemController.moveToTop(backlog_item)"
                    move-to-bottom="backlogItemController.moveToBottom(backlog_item)"
                ></div>
            </div>
        </div>

        <div class="backlog-item-children-loading" ng-if="backlogItemController.backlog_item.loading"></div>
    </div>

    <div class="backlog-item-show-children-handle"
        ng-class="{'closed': ! backlogItemController.backlog_item.children.collapsed}"
        ng-click="backlogItemController.toggleChildrenDisplayed()"
    ></div>
</div>
